<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Placeholder文本框</title>

<style>
body {
	font: 90%/150% Arial, Helvetica, sans-serif;
	color: #666;
	width: 700px;
	margin: 30px auto;
}
a {
	color: #000;
	text-decoration: none;
}
a:hover {
	color: #F60;
}
p {
	margin: 0 0 2em;
}
h1, h2, h3 {
	line-height: 110%;
}
h1 {
	font: bold 80% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	margin: 0 0 2px;
	color: #999;
}
h2 {
	margin: 0 0 8px;
}
h3 {
	border-top: solid 2px #ccc;
	margin: 40px 0 15px;
	padding-top: 10px;
}
.credits {
	color: #999;
	font: italic 90% "Times New Roman", Times, serif;
}
.credits a {
	color: #666;
}

form p {
	margin: 0 0 15px;
}

/************************************************************************************
FORM STYLE BEGIN
*************************************************************************************/

/* input styles */
input,
textarea,
input[type=search] {
	background: #f4f4f4;
	border: solid 1px #a3a3a3;
	padding: 5px 10px;
	font: 15px "Times New Roman", Times, serif;
	-webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
	-moz-box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
	box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-appearance: none; /* reset webkit search style */
}

/* input:focus styles */
input[type=text]:focus,
textarea:focus,
input[type=search]:focus {
	background: #fff;
	border-color: #333;
	outline: none; /* remove outline */
}


/* fallback placeholder */
.placeholder {
	color: #bbb;
}
/* webkit placeholder */
::-webkit-input-placeholder {
	color: #bbb;
}
/* moz placeholder */
:-moz-placeholder {
	color: #bbb;
}

/* remove webkit search input decoration and cancel button */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

</style>

</head>

<body>

<h1>Demo</h1>
<h2><a href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-Browser HTML5 Placeholder Text</a></h2>

<h3>Placeholder text with jQuery</h3>
<form class="form">
	<p><input type="text" placeholder="Your name please"></p>
	<p><input type="text" placeholder="Enter your email"></p>
	<p><input type="search" placeholder="Search"></p>
	<p><textarea placeholder="Write your comments here"></textarea></p>
</form>

</body>
</html>
